<template>
  <div class="translate-container">
    <FileList
      ref="fileList"
      :file-path="filePath"
      @fileChange="(v) => (filePath = v)"
    />
    <div class="content">
      <template v-if="filePath">
        <vue-office-docx
          v-if="!renderErr"
          class="docx-container"
          :src="filePath"
          @rendered="rendered"
          @error="errorHandler"
        />
        <div v-else class="err">
          <div>渲染失败</div>
          <i class="el-icon-error" type="danger"></i>
        </div>
      </template>
      <div v-else class="err">请选择文件</div>
      <!-- <iframe
        v-else
        width="100%"
        height="100%"
        src="https://arxiv.org/pdf/2311.12932.pdf"
        frameborder="0"
      ></iframe> -->
    </div>
    <RightNav class="right-nav" :upload-callback="uploadCallback" />
  </div>
</template>

<script>
//引入相关样式
import "@vue-office/docx/lib/index.css";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
import FileList from "./components/FileList.vue";
import RightNav from "./components/RightNav.vue";
export default {
  name: "Translate",
  components: { FileList, RightNav, VueOfficeDocx },
  data() {
    return {
      docxRender: true,
      renderErr: false,
      filePath: "",
    };
  },
  watch: {
    filePath: {
      handler(val) {
        if (val) {
          this.renderErr = false;
          this.docxRender = true;
        }
      },
    },
  },
  methods: {
    rendered() {
      this.docxRender = false;
    },
    errorHandler() {
      this.docxRender = false;
      this.renderErr = true;
    },
    uploadCallback(filePath) {
      this.filePath = filePath;
      this.$refs.fileList.getfilelist();
    },
  },
};
</script>

<style lang="less" scoped>
.dark-theme {
  .translate-container {
    color: #fff;
    .iconfont {
      background-image: var(--color-primary);
      color: transparent;
      background-clip: text;
    }
    .content {
      .err {
        color: #999;
        .el-icon-error {
          color: var(--color-primary-text);
        }
      }
    }
  }
}

.translate-container {
  display: flex;
  padding-bottom: 10px;
  min-height: 800px;
  max-height: calc(100vh - 70px);
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 900px;
    margin: 0 3px;
    padding: 10px 0;
    .err {
      margin-top: 35%;
      font-size: 18px;
      text-align: center;
      color: #999;
      .el-icon-error {
        margin-top: 10px;
        font-size: 48px;
        color: #f56c6c;
      }
    }
  }
}
</style>
